<template>
	<div class="attendance">
		<h3 style="margin: 0;margin-bottom: 10px;">
			{{userAttendance.nickName}}
		</h3>
		<div style=" width: 100%;display: flex;justify-content: space-between;">
			<div>
				<el-button type="primary" plain @click="toBack">返回</el-button>
			</div>
			<div>
				<el-date-picker v-model="selectDate" :type="dateType" :clearable="false"
					placeholder="选择日期" @change="changeDate">
				</el-date-picker>
				<el-select v-model="dateType" style="width: 80px;" @change="changeType">
					<el-option value="year" label="年"></el-option>
					<el-option value="month" label="月"></el-option>
					<el-option value="date" label="日"></el-option>
				</el-select>
			</div>
		</div>
		<div class="attendance-table">
			<el-table :data="tableData" v-loading="loading" border stripe 
				style="width: 100%" height="100%">
				<el-table-column prop="i" label="序号" width="50" fixed="left">
				</el-table-column>
				<el-table-column prop="clockingDate" label="日期" width="100">
				</el-table-column>
				<el-table-column prop="forenoonCheckin" label="上午签到时间" width="170">
				</el-table-column>
				<el-table-column prop="forenoonCheckout" label="上午签退时间" width="170">
				</el-table-column>
				<el-table-column prop="afternoonCheckin" label="下午签到时间" width="170">
				</el-table-column>
				<el-table-column prop="afternoonCheckout" label="下午签退时间" width="170">
				</el-table-column>
				<el-table-column prop="forenoonStatus" label="上午打卡情况" width="105">
					<template slot-scope="scope">
						<span v-if="scope.row.forenoonStatus === 0" style="color: #00ff00;">正常</span>
						<span v-else-if="scope.row.forenoonStatus === 1" style="color: #ffaa00;">迟到</span>
						<span v-else-if="scope.row.forenoonStatus === 2" style="color: #ffaa00;">早退</span>
						<span v-else-if="scope.row.forenoonStatus === 3" style="color: #ff0000;">旷工</span>
						<span v-else-if="scope.row.forenoonStatus === 4" >请假</span>
						<span v-else-if="scope.row.forenoonStatus === 5" style="color: #ffaa00;">迟到+早退</span>
						<span v-else-if="scope.row.forenoonStatus === 6" style="color: #ffaa00;">未签退</span>
						<span v-else-if="scope.row.forenoonStatus === 7" style="color: #ffaa00;">迟到+未签退</span>
						<span v-else>未签到</span>
					</template>
				</el-table-column>
				<el-table-column prop="afternoonStatus" label="下午打卡情况" width="105">
					<template slot-scope="scope">
						<span v-if="scope.row.afternoonStatus === 0" style="color: #00ff00;">正常</span>
						<span v-else-if="scope.row.afternoonStatus === 1" style="color: #ffaa00;">迟到</span>
						<span v-else-if="scope.row.afternoonStatus === 2" style="color: #ffaa00;">早退</span>
						<span v-else-if="scope.row.afternoonStatus === 3" style="color: #ff0000;">旷工</span>
						<span v-else-if="scope.row.afternoonStatus === 4">请假</span>
						<span v-else-if="scope.row.afternoonStatus === 5" style="color: #ffaa00;">迟到&早退</span>
						<span v-else-if="scope.row.afternoonStatus === 6" style="color: #ffaa00;">未签退</span>
						<span v-else-if="scope.row.afternoonStatus === 7" style="color: #ffaa00;">迟到+未签退</span>
						<span v-else>未签到</span>
					</template>
				</el-table-column>
				<el-table-column label="打卡位置" width="80">
					<template slot-scope="scope">
						<el-button v-if="scope.row.clockinPosition !== null" 
							@click="openMap(scope.row.clockinPosition)" 
							type="text" size="mini">
							点击查看
						</el-button>
						<span v-else>未签到</span>
					</template>
				</el-table-column>
				<el-table-column prop="clockinType" label="打卡类型" fit>
					<template slot-scope="scope">
						<el-tag v-if="scope.row.clockinType === 0">普通</el-tag>
						<el-tag v-else-if="scope.row.clockinType === 1">外勤</el-tag>
						<el-tag v-else-if="scope.row.clockinType === 2">出差</el-tag>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:current-page="fromData.currentPage" :page-sizes="[20, 50, 100]" :page-size="fromData.pageSize"
				layout="total, sizes, prev, pager, next, jumper" :total="total">
			</el-pagination>
			
			<!-- 地图 -->
			<el-dialog style="margin-top:0" :visible.sync="mapShow" width="75%" title="打卡位置" @close="mapCloseDialog">
				<MapPolygon style="height: 500px;" :markPoint="point"></MapPolygon>
			</el-dialog>
		</div>
	</div>
</template>

<script>
	import employeeAttendanceApi from "../../api/employeeAttendance.js"
	import departmentApi from "../../api/departmentManage.js";
	import MapPolygon from "../../components/AMap/MapPolygon.vue"
	export default {
		components: {
			MapPolygon
		},
		data() {
			return {
				point: [116.400274,39.905812],
				mapShow: false,
				userAttendance: {},
				fromData: {
					currentPage: 1,
					pageSize: 50,
					year: null,
					yearMonth: null,
					yearMonthDay: null,
					employeeId: null
				},
				total: 0,
				tableData: [],
				loading: false,
				dateType: "month",
				selectDate: null,
				clockinRule: {},
				// forenoonCheckinTime: null,
				// forenoonCheckoutTime: null,
				// afternoonCheckinTime: null,
				// afternoonCheckoutTime: null,
			}
		},
		created() {
			const currentYear = new Date().getFullYear();
			let currentMonth = new Date().getMonth() + 1;
			if (currentMonth < 10) {
				currentMonth = '0' + currentMonth;
			}
			this.fromData.yearMonth = `${currentYear}-${currentMonth}`;
			this.selectDate = this.fromData.yearMonth;
			
			const data = localStorage.getItem("userAttendance");
			if (data){
				this.userAttendance = JSON.parse(data);
				this.fromData.employeeId = this.userAttendance.employeeId
				this.getUserAttendanceList();
				//this.getClockinRule();
			}
		},
		destroyed() {
			// 删除本地存储的userAttendance数据
			localStorage.removeItem("userAttendance")
		},
		methods: {
			toBack() {
				this.$router.push({
					path: "/employeeAttendance/attendanceList"
				})
			},
			// 获取个人打卡规则
			// getClockinRule(){
			// 	const data = {
			// 		employeeId: this.userAttendance.employeeId
			// 	}
			// 	employeeAttendanceApi.getClockinRule(data).then(res =>{
			// 		if (res.code === 200){
			// 			this.clockinRule = res.data
			// 			this.forenoonCheckinTime = `上午签到时间(${this.clockinRule.forenoonCheckinTime})`
			// 			this.forenoonCheckoutTime = `上午签退时间(${this.clockinRule.forenoonCheckoutTime})`
			// 			this.afternoonCheckinTime = `下午签到时间(${this.clockinRule.afternoonCheckinTime})`
			// 			this.afternoonCheckoutTime = `下午签退时间(${this.clockinRule.afternoonCheckoutTime})`
			// 		}
			// 	})
			// },
			// 获取个人出勤列表
			getUserAttendanceList() {
				//console.log("提交数据==>", this.fromData)
				this.loading = true
				employeeAttendanceApi.getUserAttendanceList(this.fromData).then(res => {
					if (res.code === 200) {
						//console.log("获取的数据==>", res.data)
						this.total = res.data.total
						this.tableData = res.data.attendanceList.map((item,index) =>{
							item.i =(this.fromData.currentPage-1)*this.fromData.pageSize+index+1
							return item;
						})
						this.loading = false
					}
				})
			},
			// pageSize变化
			handleSizeChange(pageSize) {
				this.fromData.pageSize = pageSize
				this.getUserAttendanceList()
			},
			// 页码变化
			handleCurrentChange(curPage) {
				this.fromData.currentPage = curPage
				this.getUserAttendanceList()
			},
			// 条件查询重置
			reset() {
				this.fromData = {
					currentPage: 1,
					pageSize: 10,
					year: null,
					yearMonth: null,
					yearMonthDay: null,
					departmentId: null,
					nickName: null
				}
				this.getUserAttendanceList()
			},
			// 条件查询提交
			onSubmit() {
				this.fromData.currentPage = 1
				this.getUserAttendanceList()
			},
			clearDepartmentId() {
				this.fromData.departmentId = null
				this.fromData.currentPage = 1
				this.getUserAttendanceList()
			},
			changeDate() {
				//console.log("选择的日期==>",this.selectDate)
				this.fromData.year = null;
				this.fromData.yearMonth = null;
				this.fromData.yearMonthDay = null;
				if (this.selectDate !== null) {
					const year = this.selectDate.getFullYear();
					const month = this.selectDate.getMonth() + 1; // 月份从 0 开始，需要加 1
					const day = this.selectDate.getDate();
					// 格式化月份和日期，确保始终是两位数
					const formattedMonth = month < 10 ? '0' + month : month;
					const formattedDay = day < 10 ? '0' + day : day;
					if (this.dateType === "year") {
						this.fromData.year = year;
					} else if (this.dateType === "month") {
						this.fromData.yearMonth = `${year}-${formattedMonth}`;
					} else {
						this.fromData.yearMonthDay = `${year}-${formattedMonth}-${formattedDay}`;
					}
				}
				this.onSubmit()
			},
			changeType(){
				this.selectDate = new Date()
				this.changeDate();
			},
			openMap(clockinPosition){
				//console.log("clockinPosition==>",clockinPosition)
				this.point = clockinPosition.split(",");
				this.mapShow = true;
			},
			mapCloseDialog(){
				this.point = new Array;
			},
		}
	}
</script>

<style>
	.attendance {
		height: 100%;
	}
	
	.attendance-table {
		height: 88%;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		justify-content: center;
		margin-top: 10px;
	}
</style>